import React, { useEffect, useState } from 'react';
import { Button, Tooltip, Tag } from 'antd';
import { DownOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable, { TableDropdown } from '@ant-design/pro-table';
let tableListDataSource = [
  {
    key: 0,
    name: '学生一',
    学位: '硕士研究生',
    sex: '男',
    country: '中国🇨🇳',
    year: '2021-06',
    class: '计算机一班',
    研究方向: '深度学习',
    科研成果: 'SCI论文',

    createdAt: 1652686521164,
    memo: '简短备注文案',
  },
  {
    key: 1,
    name: '学生二',
    学位: '硕士研究生',
    sex: '男',
    country: '中国🇨🇳',
    year: '2021-06',
    class: '计算机一班',
    研究方向: '深度学习',
    科研成果: 'SCI论文',

    createdAt: 1652686521164,
    memo: '简短备注文案',
  },
  {
    key: 2,
    name: '学生三',
    学位: '博士研究生',
    sex: '女',
    country: '中国🇨🇳',
    year: '2022-06',
    class: '计算机二班',
    研究方向: '深度学习',
    科研成果: '很长很长很长很长很长很长很长的文字要展示但是要留下尾巴',

    createdAt: 1652686524888,
    memo: '很长很长很长很长很长很长很长的文字要展示但是要留下尾巴',
  },
  {
    key: 3,
    name: '学生四',
    学位: '博士研究生',
    sex: '女',
    country: '中国🇨🇳',
    year: '2022-06',
    class: '计算机二班',
    研究方向: '深度学习',
    科研成果: '很长很长很长很长很长很长很长的文字要展示但是要留下尾巴',

    createdAt: 1652686524888,
    memo: '很长很长很长很长很长很长很长的文字要展示但是要留下尾巴',
  },
  {
    key: 4,
    name: '学生五',
    学位: '留学生',
    sex: '女',
    country: '俄罗斯🇷🇺',
    year: '2022-06',
    class: '计算机二班',
    研究方向: '深度学习',
    科研成果: 'SCI论文',
    联合培养国别: '英国',
    联合培养单位: '卡迪夫大学',
    出国时间: '2021-06',
    回国时间: '2022-06',

    createdAt: 1652686524888,
    memo: '很长很长很长很长很长很长很长的文字要展示但是要留下尾巴',
  },
  {
    key: 5,
    name: '学生六',
    学位: '留学生',
    sex: '女',
    country: '法国🇫🇷',
    year: '2022-06',
    class: '计算机二班',
    研究方向: '深度学习',
    科研成果: 'SCI论文',
    联合培养国别: '英国',
    联合培养单位: '卡迪夫大学',
    出国时间: '2021-06',
    回国时间: '2022-06',
    createdAt: 1652686524888,
    memo: '很长很长很长很长很长很长很长的文字要展示但是要留下尾巴',
  },
];
const columns1 = [
  {
    title: '姓名',
    dataIndex: 'name',
  },
  {
    title: '学位',
    dataIndex: '学位',
    filters: true,
    onFilter: true,
    valueEnum: {
      硕士研究生: { text: '硕士研究生', status: 'Success' },
      博士研究生: { text: '博士研究生', color: 'orange' },
      留学生: { text: '留学生', color: 'blue' },
    },
  },
  {
    title: '性别',
    dataIndex: 'sex',
    // align: 'right',
    sorter: {
      compare: (a: { sex: string }, b: { sex: string }) =>
        a.sex.localeCompare(b.sex),
    },
    valueEnum: {
      男: { text: '男' },
      女: { text: '女' },
    },
  },
  {
    title: '国籍',
    dataIndex: 'country',
    initialValue: 'all',
  },
  {
    title: '入学年级',
    dataIndex: 'year',
  },
  // {
  //     title: (
  //         <>
  //             创建时间
  //             <Tooltip placement="top" title="这是一段描述">
  //                 <QuestionCircleOutlined style={{ marginLeft: 4 }} />
  //             </Tooltip>
  //         </>
  //     ),
  //     width: 140,
  //     key: 'since',
  //     dataIndex: 'createdAt',
  //     valueType: 'date',
  //     sorter: (a, b) => a.createdAt - b.createdAt,
  // },
  {
    title: '班级',
    dataIndex: 'class',
    ellipsis: true,
    // copyable: true,
  },
  {
    title: '研究方向',
    dataIndex: '研究方向',
    ellipsis: true,
    render: (_) => <Tag>{_}</Tag>,
  },
  {
    title: '科研成果',
    dataIndex: '科研成果',
    ellipsis: true,
    copyable: true,
  },
  {
    title: '操作',
    key: 'option',
    valueType: 'option',
    render: () => [<a key="link">编辑</a>, <a key="link2">删除</a>],
  },
];
const columns2 = [
  {
    title: '姓名',
    dataIndex: 'name',
  },
  {
    title: '学位',
    dataIndex: '学位',
    filters: true,
    onFilter: true,
    valueEnum: {
      硕士研究生: { text: '硕士研究生', status: 'Success' },
      博士研究生: { text: '博士研究生', color: 'orange' },
      留学生: { text: '留学生', color: 'blue' },
    },
  },
  {
    title: '性别',
    dataIndex: 'sex',
    // align: 'right',
    sorter: {
      compare: (a: { sex: string }, b: { sex: string }) =>
        a.sex.localeCompare(b.sex),
    },
    valueEnum: {
      男: { text: '男' },
      女: { text: '女' },
    },
  },
  {
    title: '国籍',
    dataIndex: 'country',
    // initialValue: 'all',
  },
  {
    title: '联合培养国别',
    dataIndex: '联合培养国别',
    ellipsis: true,
  },
  {
    title: '联合培养单位',
    dataIndex: '联合培养单位',
    ellipsis: true,
  },
  {
    title: '出国时间',
    dataIndex: '出国时间',
    ellipsis: true,
  },
  {
    title: '回国时间',
    dataIndex: '回国时间',
    ellipsis: true,
  },

  {
    title: '科研成果',
    dataIndex: '科研成果',
    ellipsis: true,
    copyable: true,
  },
  {
    title: '操作',
    key: 'option',
    valueType: 'option',
    render: () => [<a key="link">编辑</a>, <a key="link2">删除</a>],
  },
];
export default ({ tableKey }: any) => {
  console.log(tableKey);
  const data = tableListDataSource.filter((item: any) => {
    if (tableKey === '0') {
      return true;
    }
    if (tableKey === '1') {
      return item.学位 === '硕士研究生';
    }
    if (tableKey === '2') {
      return item.学位 === '博士研究生';
    }
    if (tableKey === '3') {
      return item.学位 === '留学生';
    }
  });
  const headerTitle = (value: any) => {
    if (tableKey === '0') {
      return '全部学生';
    }
    if (tableKey === '1') {
      return '硕士研究生';
    }
    if (tableKey === '2') {
      return '博士研究生';
    }
    if (tableKey === '3') {
      return '留学生';
    }
  };
  return (
    <>
      {/* <Button onClick={() => {
                console.log(tableListDataSource);
            }}>测试</Button> */}
      <ProTable
        bordered
        columns={tableKey === '3' ? columns2 : columns1}
        dataSource={data}
        // request={(params, sorter, filter) => {
        //     // 表单搜索项会从 params 传入，传递给后端接口。
        //     console.log(params, sorter, filter);
        //     return Promise.resolve({
        //         data: tableListDataSource,
        //         success: true,
        //     });
        // }}
        rowKey="key"
        pagination={{
          showQuickJumper: true,
        }}
        search={false}
        dateFormatter="string"
        headerTitle={headerTitle(tableKey)}
        toolBarRender={() => [
          // <Button key="show">查看日志</Button>,
          <Button key="out">
            导出数据
            <DownOutlined />
          </Button>,
          <Button type="primary" key="primary">
            添加学生
          </Button>,
        ]}
      />
    </>
  );
};
